<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iconfont Demo</title>
        <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon" />
        <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" />
        <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" />
        <link rel="stylesheet" href="demo.css" />
        <link rel="stylesheet" href="iconfont.css" />
        <script src="iconfont.js"></script>
        <!-- jQuery -->
        <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
        <!-- 代码高亮 -->
        <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
        <style>
            .main .logo {
                margin-top: 0;
                height: auto;
            }

            .main .logo a {
                display: flex;
                align-items: center;
            }

            .main .logo .sub-title {
                margin-left: 0.5em;
                font-size: 22px;
                color: #fff;
                background: linear-gradient(-45deg, #3967ff, #b500fe);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <h1 class="logo">
                <a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
                    <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg" />
                </a>
            </h1>
            <div class="nav-tabs">
                <ul id="tabs" class="dib-box">
                    <li class="dib active"><span>Unicode</span></li>
                    <li class="dib"><span>Font class</span></li>
                    <li class="dib"><span>Symbol</span></li>
                </ul>

                <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3797460" target="_blank" class="nav-more">查看项目</a>
            </div>
            <div class="tab-container">
                <div class="content unicode" style="display: block">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <span class="icon iconfont">&#xe8ec;</span>
                            <div class="name">caret-down</div>
                            <div class="code-name">&amp;#xe8ec;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8ed;</span>
                            <div class="name">caret-up</div>
                            <div class="code-name">&amp;#xe8ed;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8ee;</span>
                            <div class="name">caret-right</div>
                            <div class="code-name">&amp;#xe8ee;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8f0;</span>
                            <div class="name">caret-left</div>
                            <div class="code-name">&amp;#xe8f0;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe685;</span>
                            <div class="name">arrow-left-bold</div>
                            <div class="code-name">&amp;#xe685;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe686;</span>
                            <div class="name">arrow-up-bold</div>
                            <div class="code-name">&amp;#xe686;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe687;</span>
                            <div class="name">arrow-down-bold</div>
                            <div class="code-name">&amp;#xe687;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe688;</span>
                            <div class="name">arrow-right-bold</div>
                            <div class="code-name">&amp;#xe688;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe77d;</span>
                            <div class="name">check-circle</div>
                            <div class="code-name">&amp;#xe77d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe77e;</span>
                            <div class="name">close-circle</div>
                            <div class="code-name">&amp;#xe77e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe77f;</span>
                            <div class="name">info-circle</div>
                            <div class="code-name">&amp;#xe77f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe782;</span>
                            <div class="name">question-circle</div>
                            <div class="code-name">&amp;#xe782;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe789;</span>
                            <div class="name">warning-circle</div>
                            <div class="code-name">&amp;#xe789;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe78c;</span>
                            <div class="name">issues close</div>
                            <div class="code-name">&amp;#xe78c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe792;</span>
                            <div class="name">app store</div>
                            <div class="code-name">&amp;#xe792;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b9;</span>
                            <div class="name">mobile</div>
                            <div class="code-name">&amp;#xe7b9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ba;</span>
                            <div class="name">tablet</div>
                            <div class="code-name">&amp;#xe7ba;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c0;</span>
                            <div class="name">property safety</div>
                            <div class="code-name">&amp;#xe7c0;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c2;</span>
                            <div class="name">safety certificate</div>
                            <div class="code-name">&amp;#xe7c2;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c5;</span>
                            <div class="name">insurance</div>
                            <div class="code-name">&amp;#xe7c5;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7cf;</span>
                            <div class="name">delete</div>
                            <div class="code-name">&amp;#xe7cf;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d0;</span>
                            <div class="name">hourglass</div>
                            <div class="code-name">&amp;#xe7d0;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d2;</span>
                            <div class="name">skin</div>
                            <div class="code-name">&amp;#xe7d2;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d6;</span>
                            <div class="name">shop</div>
                            <div class="code-name">&amp;#xe7d6;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7dc;</span>
                            <div class="name">rocket</div>
                            <div class="code-name">&amp;#xe7dc;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ee;</span>
                            <div class="name">shopping</div>
                            <div class="code-name">&amp;#xe7ee;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f0;</span>
                            <div class="name">laptop</div>
                            <div class="code-name">&amp;#xe7f0;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f7;</span>
                            <div class="name">camera</div>
                            <div class="code-name">&amp;#xe7f7;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f8;</span>
                            <div class="name">read</div>
                            <div class="code-name">&amp;#xe7f8;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f9;</span>
                            <div class="name">notification</div>
                            <div class="code-name">&amp;#xe7f9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7fa;</span>
                            <div class="name">sound</div>
                            <div class="code-name">&amp;#xe7fa;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7fb;</span>
                            <div class="name">radar chart</div>
                            <div class="code-name">&amp;#xe7fb;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe84c;</span>
                            <div class="name">drag</div>
                            <div class="code-name">&amp;#xe84c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe84d;</span>
                            <div class="name">fire</div>
                            <div class="code-name">&amp;#xe84d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe84e;</span>
                            <div class="name">thunderbolt</div>
                            <div class="code-name">&amp;#xe84e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe853;</span>
                            <div class="name">app store-fill</div>
                            <div class="code-name">&amp;#xe853;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe855;</span>
                            <div class="name">safety certificate-f</div>
                            <div class="code-name">&amp;#xe855;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe861;</span>
                            <div class="name">calendar-check-fill</div>
                            <div class="code-name">&amp;#xe861;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe862;</span>
                            <div class="name">image-fill</div>
                            <div class="code-name">&amp;#xe862;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe863;</span>
                            <div class="name">id card-fill</div>
                            <div class="code-name">&amp;#xe863;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe864;</span>
                            <div class="name">credit card-fill</div>
                            <div class="code-name">&amp;#xe864;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe865;</span>
                            <div class="name">notification-fill</div>
                            <div class="code-name">&amp;#xe865;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe866;</span>
                            <div class="name">skin-fill</div>
                            <div class="code-name">&amp;#xe866;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe867;</span>
                            <div class="name">sound-fill</div>
                            <div class="code-name">&amp;#xe867;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe868;</span>
                            <div class="name">fire-fill</div>
                            <div class="code-name">&amp;#xe868;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe86c;</span>
                            <div class="name">gift-fill</div>
                            <div class="code-name">&amp;#xe86c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe870;</span>
                            <div class="name">thunderbolt-fill</div>
                            <div class="code-name">&amp;#xe870;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe872;</span>
                            <div class="name">error-fill</div>
                            <div class="code-name">&amp;#xe872;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe873;</span>
                            <div class="name">crown-fill</div>
                            <div class="code-name">&amp;#xe873;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe879;</span>
                            <div class="name">ant-cloud</div>
                            <div class="code-name">&amp;#xe879;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe880;</span>
                            <div class="name">windows</div>
                            <div class="code-name">&amp;#xe880;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe885;</span>
                            <div class="name">windows-fill</div>
                            <div class="code-name">&amp;#xe885;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8ea;</span>
                            <div class="name">verified</div>
                            <div class="code-name">&amp;#xe8ea;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8eb;</span>
                            <div class="name">appstore add</div>
                            <div class="code-name">&amp;#xe8eb;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8fe;</span>
                            <div class="name">plus</div>
                            <div class="code-name">&amp;#xe8fe;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe913;</span>
                            <div class="name">aim</div>
                            <div class="code-name">&amp;#xe913;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ed;</span>
                            <div class="name">mail</div>
                            <div class="code-name">&amp;#xe7ed;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe86f;</span>
                            <div class="name">mail-fill</div>
                            <div class="code-name">&amp;#xe86f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe85f;</span>
                            <div class="name">folder-fill</div>
                            <div class="code-name">&amp;#xe85f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe860;</span>
                            <div class="name">folder-open-fill</div>
                            <div class="code-name">&amp;#xe860;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe60a;</span>
                            <div class="name">ai</div>
                            <div class="code-name">&amp;#xe60a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe60b;</span>
                            <div class="name">apk</div>
                            <div class="code-name">&amp;#xe60b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe60c;</span>
                            <div class="name">zip</div>
                            <div class="code-name">&amp;#xe60c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe60d;</span>
                            <div class="name">ttf</div>
                            <div class="code-name">&amp;#xe60d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe60e;</span>
                            <div class="name">gif</div>
                            <div class="code-name">&amp;#xe60e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe60f;</span>
                            <div class="name">xls</div>
                            <div class="code-name">&amp;#xe60f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe612;</span>
                            <div class="name">ppt</div>
                            <div class="code-name">&amp;#xe612;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe613;</span>
                            <div class="name">avi</div>
                            <div class="code-name">&amp;#xe613;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe614;</span>
                            <div class="name">txt</div>
                            <div class="code-name">&amp;#xe614;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe616;</span>
                            <div class="name">eps</div>
                            <div class="code-name">&amp;#xe616;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe617;</span>
                            <div class="name">com</div>
                            <div class="code-name">&amp;#xe617;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe618;</span>
                            <div class="name">png</div>
                            <div class="code-name">&amp;#xe618;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe619;</span>
                            <div class="name">svg</div>
                            <div class="code-name">&amp;#xe619;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe61a;</span>
                            <div class="name">mp4</div>
                            <div class="code-name">&amp;#xe61a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe61b;</span>
                            <div class="name">jpg</div>
                            <div class="code-name">&amp;#xe61b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe61c;</span>
                            <div class="name">png</div>
                            <div class="code-name">&amp;#xe61c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe61d;</span>
                            <div class="name">psd</div>
                            <div class="code-name">&amp;#xe61d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe61e;</span>
                            <div class="name">mp3</div>
                            <div class="code-name">&amp;#xe61e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe61f;</span>
                            <div class="name">html</div>
                            <div class="code-name">&amp;#xe61f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe620;</span>
                            <div class="name">doc</div>
                            <div class="code-name">&amp;#xe620;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe621;</span>
                            <div class="name">unknow</div>
                            <div class="code-name">&amp;#xe621;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe757;</span>
                            <div class="name">language</div>
                            <div class="code-name">&amp;#xe757;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe601;</span>
                            <div class="name">aui-icon-back</div>
                            <div class="code-name">&amp;#xe601;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6b6;</span>
                            <div class="name">ui_component</div>
                            <div class="code-name">&amp;#xe6b6;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe615;</span>
                            <div class="name">guide</div>
                            <div class="code-name">&amp;#xe615;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe611;</span>
                            <div class="name">user</div>
                            <div class="code-name">&amp;#xe611;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe609;</span>
                            <div class="name">back</div>
                            <div class="code-name">&amp;#xe609;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe610;</span>
                            <div class="name">filter</div>
                            <div class="code-name">&amp;#xe610;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c7;</span>
                            <div class="name">排序sort-降</div>
                            <div class="code-name">&amp;#xe7c7;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ce;</span>
                            <div class="name">排序sort-升</div>
                            <div class="code-name">&amp;#xe7ce;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ad;</span>
                            <div class="name">153error40402</div>
                            <div class="code-name">&amp;#xe7ad;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c1;</span>
                            <div class="name">152error40401</div>
                            <div class="code-name">&amp;#xe7c1;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe62c;</span>
                            <div class="name">nodata</div>
                            <div class="code-name">&amp;#xe62c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe871;</span>
                            <div class="name">setting-fill</div>
                            <div class="code-name">&amp;#xe871;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e7;</span>
                            <div class="name">man</div>
                            <div class="code-name">&amp;#xe7e7;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e8;</span>
                            <div class="name">phone</div>
                            <div class="code-name">&amp;#xe7e8;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e9;</span>
                            <div class="name">wrench</div>
                            <div class="code-name">&amp;#xe7e9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ea;</span>
                            <div class="name">tags</div>
                            <div class="code-name">&amp;#xe7ea;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7eb;</span>
                            <div class="name">vertical right</div>
                            <div class="code-name">&amp;#xe7eb;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ec;</span>
                            <div class="name">vertical left</div>
                            <div class="code-name">&amp;#xe7ec;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f1;</span>
                            <div class="name">doubleleft</div>
                            <div class="code-name">&amp;#xe7f1;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f2;</span>
                            <div class="name">double right</div>
                            <div class="code-name">&amp;#xe7f2;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f3;</span>
                            <div class="name">indent</div>
                            <div class="code-name">&amp;#xe7f3;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f4;</span>
                            <div class="name">outdent</div>
                            <div class="code-name">&amp;#xe7f4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f5;</span>
                            <div class="name">menu</div>
                            <div class="code-name">&amp;#xe7f5;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7f6;</span>
                            <div class="name">unordered list</div>
                            <div class="code-name">&amp;#xe7f6;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7fc;</span>
                            <div class="name">code</div>
                            <div class="code-name">&amp;#xe7fc;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7fd;</span>
                            <div class="name">check</div>
                            <div class="code-name">&amp;#xe7fd;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7fe;</span>
                            <div class="name">close</div>
                            <div class="code-name">&amp;#xe7fe;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe842;</span>
                            <div class="name">crown</div>
                            <div class="code-name">&amp;#xe842;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe843;</span>
                            <div class="name">desktop</div>
                            <div class="code-name">&amp;#xe843;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe844;</span>
                            <div class="name">stop</div>
                            <div class="code-name">&amp;#xe844;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe845;</span>
                            <div class="name">check-circle-fill</div>
                            <div class="code-name">&amp;#xe845;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe846;</span>
                            <div class="name">close-circle-fill</div>
                            <div class="code-name">&amp;#xe846;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe847;</span>
                            <div class="name">info-circle-fill</div>
                            <div class="code-name">&amp;#xe847;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe848;</span>
                            <div class="name">stop-fill</div>
                            <div class="code-name">&amp;#xe848;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe849;</span>
                            <div class="name">warning-circle-fill</div>
                            <div class="code-name">&amp;#xe849;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe84a;</span>
                            <div class="name">heart-fill</div>
                            <div class="code-name">&amp;#xe84a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe85e;</span>
                            <div class="name">folder-add-fill</div>
                            <div class="code-name">&amp;#xe85e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe869;</span>
                            <div class="name">like-fill</div>
                            <div class="code-name">&amp;#xe869;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe86a;</span>
                            <div class="name">unlike-fill</div>
                            <div class="code-name">&amp;#xe86a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe86b;</span>
                            <div class="name">star-fill</div>
                            <div class="code-name">&amp;#xe86b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe86e;</span>
                            <div class="name">wrench-fill</div>
                            <div class="code-name">&amp;#xe86e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe87e;</span>
                            <div class="name">apple</div>
                            <div class="code-name">&amp;#xe87e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe87f;</span>
                            <div class="name">android</div>
                            <div class="code-name">&amp;#xe87f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe881;</span>
                            <div class="name">android-fill</div>
                            <div class="code-name">&amp;#xe881;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe882;</span>
                            <div class="name">apple-fill</div>
                            <div class="code-name">&amp;#xe882;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe883;</span>
                            <div class="name">wechat-fill</div>
                            <div class="code-name">&amp;#xe883;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe884;</span>
                            <div class="name">alipay-circle-fill</div>
                            <div class="code-name">&amp;#xe884;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe88c;</span>
                            <div class="name">alipay-square-fill</div>
                            <div class="code-name">&amp;#xe88c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8e8;</span>
                            <div class="name">bug-fill</div>
                            <div class="code-name">&amp;#xe8e8;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8e9;</span>
                            <div class="name">comment</div>
                            <div class="code-name">&amp;#xe8e9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8ef;</span>
                            <div class="name">search</div>
                            <div class="code-name">&amp;#xe8ef;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8f1;</span>
                            <div class="name">woman</div>
                            <div class="code-name">&amp;#xe8f1;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8ff;</span>
                            <div class="name">eye-close</div>
                            <div class="code-name">&amp;#xe8ff;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe900;</span>
                            <div class="name">clear</div>
                            <div class="code-name">&amp;#xe900;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe90e;</span>
                            <div class="name">Field-time</div>
                            <div class="code-name">&amp;#xe90e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe90f;</span>
                            <div class="name">Partition</div>
                            <div class="code-name">&amp;#xe90f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe914;</span>
                            <div class="name">compress</div>
                            <div class="code-name">&amp;#xe914;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe915;</span>
                            <div class="name">expend</div>
                            <div class="code-name">&amp;#xe915;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe916;</span>
                            <div class="name">send</div>
                            <div class="code-name">&amp;#xe916;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe783;</span>
                            <div class="name">right-circle</div>
                            <div class="code-name">&amp;#xe783;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe784;</span>
                            <div class="name">time out</div>
                            <div class="code-name">&amp;#xe784;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe781;</span>
                            <div class="name">earth</div>
                            <div class="code-name">&amp;#xe781;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe785;</span>
                            <div class="name">YUAN</div>
                            <div class="code-name">&amp;#xe785;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe786;</span>
                            <div class="name">sync</div>
                            <div class="code-name">&amp;#xe786;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe787;</span>
                            <div class="name">transaction</div>
                            <div class="code-name">&amp;#xe787;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe788;</span>
                            <div class="name">reload</div>
                            <div class="code-name">&amp;#xe788;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe78a;</span>
                            <div class="name">message</div>
                            <div class="code-name">&amp;#xe78a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe78e;</span>
                            <div class="name">setting</div>
                            <div class="code-name">&amp;#xe78e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe78f;</span>
                            <div class="name">eye</div>
                            <div class="code-name">&amp;#xe78f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe790;</span>
                            <div class="name">location</div>
                            <div class="code-name">&amp;#xe790;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe791;</span>
                            <div class="name">edit-square</div>
                            <div class="code-name">&amp;#xe791;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe794;</span>
                            <div class="name">control</div>
                            <div class="code-name">&amp;#xe794;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ae;</span>
                            <div class="name">add user</div>
                            <div class="code-name">&amp;#xe7ae;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7af;</span>
                            <div class="name">delete team</div>
                            <div class="code-name">&amp;#xe7af;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b0;</span>
                            <div class="name">delete user</div>
                            <div class="code-name">&amp;#xe7b0;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b1;</span>
                            <div class="name">addteam</div>
                            <div class="code-name">&amp;#xe7b1;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b2;</span>
                            <div class="name">user</div>
                            <div class="code-name">&amp;#xe7b2;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b3;</span>
                            <div class="name">team</div>
                            <div class="code-name">&amp;#xe7b3;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b4;</span>
                            <div class="name">bar chart</div>
                            <div class="code-name">&amp;#xe7b4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b5;</span>
                            <div class="name">file search</div>
                            <div class="code-name">&amp;#xe7b5;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b6;</span>
                            <div class="name">solution</div>
                            <div class="code-name">&amp;#xe7b6;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b7;</span>
                            <div class="name">file-add</div>
                            <div class="code-name">&amp;#xe7b7;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b8;</span>
                            <div class="name">file-excel</div>
                            <div class="code-name">&amp;#xe7b8;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c3;</span>
                            <div class="name">experiment</div>
                            <div class="code-name">&amp;#xe7c3;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c4;</span>
                            <div class="name">bell</div>
                            <div class="code-name">&amp;#xe7c4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c6;</span>
                            <div class="name">home</div>
                            <div class="code-name">&amp;#xe7c6;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c8;</span>
                            <div class="name">like</div>
                            <div class="code-name">&amp;#xe7c8;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c9;</span>
                            <div class="name">unlike</div>
                            <div class="code-name">&amp;#xe7c9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ca;</span>
                            <div class="name">unlock</div>
                            <div class="code-name">&amp;#xe7ca;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7cb;</span>
                            <div class="name">lock</div>
                            <div class="code-name">&amp;#xe7cb;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7cc;</span>
                            <div class="name">customerservice</div>
                            <div class="code-name">&amp;#xe7cc;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7cd;</span>
                            <div class="name">flag</div>
                            <div class="code-name">&amp;#xe7cd;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d1;</span>
                            <div class="name">folder-add</div>
                            <div class="code-name">&amp;#xe7d1;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d3;</span>
                            <div class="name">calendar-check</div>
                            <div class="code-name">&amp;#xe7d3;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d4;</span>
                            <div class="name">scan</div>
                            <div class="code-name">&amp;#xe7d4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d7;</span>
                            <div class="name">barcode</div>
                            <div class="code-name">&amp;#xe7d7;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d8;</span>
                            <div class="name">cluster</div>
                            <div class="code-name">&amp;#xe7d8;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d9;</span>
                            <div class="name">printer</div>
                            <div class="code-name">&amp;#xe7d9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7da;</span>
                            <div class="name">cloud-upload</div>
                            <div class="code-name">&amp;#xe7da;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7db;</span>
                            <div class="name">cloud-download</div>
                            <div class="code-name">&amp;#xe7db;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7dd;</span>
                            <div class="name">qrcode</div>
                            <div class="code-name">&amp;#xe7dd;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7de;</span>
                            <div class="name">table</div>
                            <div class="code-name">&amp;#xe7de;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7df;</span>
                            <div class="name">id card</div>
                            <div class="code-name">&amp;#xe7df;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e0;</span>
                            <div class="name">credit card</div>
                            <div class="code-name">&amp;#xe7e0;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e1;</span>
                            <div class="name">heart</div>
                            <div class="code-name">&amp;#xe7e1;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e2;</span>
                            <div class="name">error</div>
                            <div class="code-name">&amp;#xe7e2;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e3;</span>
                            <div class="name">star</div>
                            <div class="code-name">&amp;#xe7e3;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e4;</span>
                            <div class="name">wifi</div>
                            <div class="code-name">&amp;#xe7e4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e5;</span>
                            <div class="name">key</div>
                            <div class="code-name">&amp;#xe7e5;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7e6;</span>
                            <div class="name">link</div>
                            <div class="code-name">&amp;#xe7e6;</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="unicode-">Unicode 引用</h2>
                        <hr />

                        <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
                        <ul>
                            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
                            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
                        </ul>
                        <blockquote>
                            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
                        </blockquote>
                        <p>Unicode 使用步骤如下：</p>
                        <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
                        <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1669657062313') format('woff2'),
       url('iconfont.woff?t=1669657062313') format('woff'),
       url('iconfont.ttf?t=1669657062313') format('truetype');
}
</code></pre>
                        <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
                        <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
                        <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                        <blockquote>
                            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                        </blockquote>
                    </div>
                </div>
                <div class="content font-class">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <span class="icon iconfont icon-caret-down"></span>
                            <div class="name">caret-down</div>
                            <div class="code-name">.icon-caret-down</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-caret-up"></span>
                            <div class="name">caret-up</div>
                            <div class="code-name">.icon-caret-up</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-caret-right"></span>
                            <div class="name">caret-right</div>
                            <div class="code-name">.icon-caret-right</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-caret-left"></span>
                            <div class="name">caret-left</div>
                            <div class="code-name">.icon-caret-left</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-arrow-left-bold"></span>
                            <div class="name">arrow-left-bold</div>
                            <div class="code-name">.icon-arrow-left-bold</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-arrow-up-bold"></span>
                            <div class="name">arrow-up-bold</div>
                            <div class="code-name">.icon-arrow-up-bold</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-arrow-down-bold"></span>
                            <div class="name">arrow-down-bold</div>
                            <div class="code-name">.icon-arrow-down-bold</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-arrow-right-bold"></span>
                            <div class="name">arrow-right-bold</div>
                            <div class="code-name">.icon-arrow-right-bold</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-check-circle"></span>
                            <div class="name">check-circle</div>
                            <div class="code-name">.icon-check-circle</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-close-circle"></span>
                            <div class="name">close-circle</div>
                            <div class="code-name">.icon-close-circle</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-info-circle"></span>
                            <div class="name">info-circle</div>
                            <div class="code-name">.icon-info-circle</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-question-circle"></span>
                            <div class="name">question-circle</div>
                            <div class="code-name">.icon-question-circle</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-warning-circle"></span>
                            <div class="name">warning-circle</div>
                            <div class="code-name">.icon-warning-circle</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-issuesclose"></span>
                            <div class="name">issues close</div>
                            <div class="code-name">.icon-issuesclose</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-appstore"></span>
                            <div class="name">app store</div>
                            <div class="code-name">.icon-appstore</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-mobile"></span>
                            <div class="name">mobile</div>
                            <div class="code-name">.icon-mobile</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-tablet"></span>
                            <div class="name">tablet</div>
                            <div class="code-name">.icon-tablet</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-propertysafety"></span>
                            <div class="name">property safety</div>
                            <div class="code-name">.icon-propertysafety</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-safetycertificate"></span>
                            <div class="name">safety certificate</div>
                            <div class="code-name">.icon-safetycertificate</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-insurance"></span>
                            <div class="name">insurance</div>
                            <div class="code-name">.icon-insurance</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-delete"></span>
                            <div class="name">delete</div>
                            <div class="code-name">.icon-delete</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-hourglass"></span>
                            <div class="name">hourglass</div>
                            <div class="code-name">.icon-hourglass</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-skin"></span>
                            <div class="name">skin</div>
                            <div class="code-name">.icon-skin</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shop"></span>
                            <div class="name">shop</div>
                            <div class="code-name">.icon-shop</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-rocket"></span>
                            <div class="name">rocket</div>
                            <div class="code-name">.icon-rocket</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shopping"></span>
                            <div class="name">shopping</div>
                            <div class="code-name">.icon-shopping</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-laptop"></span>
                            <div class="name">laptop</div>
                            <div class="code-name">.icon-laptop</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-camera"></span>
                            <div class="name">camera</div>
                            <div class="code-name">.icon-camera</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-read"></span>
                            <div class="name">read</div>
                            <div class="code-name">.icon-read</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-notification"></span>
                            <div class="name">notification</div>
                            <div class="code-name">.icon-notification</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-sound"></span>
                            <div class="name">sound</div>
                            <div class="code-name">.icon-sound</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-radarchart"></span>
                            <div class="name">radar chart</div>
                            <div class="code-name">.icon-radarchart</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-drag"></span>
                            <div class="name">drag</div>
                            <div class="code-name">.icon-drag</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-fire"></span>
                            <div class="name">fire</div>
                            <div class="code-name">.icon-fire</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-thunderbolt"></span>
                            <div class="name">thunderbolt</div>
                            <div class="code-name">.icon-thunderbolt</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-appstore-fill"></span>
                            <div class="name">app store-fill</div>
                            <div class="code-name">.icon-appstore-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-safetycertificate-f"></span>
                            <div class="name">safety certificate-f</div>
                            <div class="code-name">.icon-safetycertificate-f</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-calendar-check-fill"></span>
                            <div class="name">calendar-check-fill</div>
                            <div class="code-name">.icon-calendar-check-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-image-fill"></span>
                            <div class="name">image-fill</div>
                            <div class="code-name">.icon-image-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-idcard-fill"></span>
                            <div class="name">id card-fill</div>
                            <div class="code-name">.icon-idcard-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-creditcard-fill"></span>
                            <div class="name">credit card-fill</div>
                            <div class="code-name">.icon-creditcard-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-notification-fill"></span>
                            <div class="name">notification-fill</div>
                            <div class="code-name">.icon-notification-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-skin-fill"></span>
                            <div class="name">skin-fill</div>
                            <div class="code-name">.icon-skin-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-sound-fill"></span>
                            <div class="name">sound-fill</div>
                            <div class="code-name">.icon-sound-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-fire-fill"></span>
                            <div class="name">fire-fill</div>
                            <div class="code-name">.icon-fire-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-gift-fill"></span>
                            <div class="name">gift-fill</div>
                            <div class="code-name">.icon-gift-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-thunderbolt-fill"></span>
                            <div class="name">thunderbolt-fill</div>
                            <div class="code-name">.icon-thunderbolt-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-error-fill"></span>
                            <div class="name">error-fill</div>
                            <div class="code-name">.icon-error-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-crown-fill"></span>
                            <div class="name">crown-fill</div>
                            <div class="code-name">.icon-crown-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-ant-cloud"></span>
                            <div class="name">ant-cloud</div>
                            <div class="code-name">.icon-ant-cloud</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-windows"></span>
                            <div class="name">windows</div>
                            <div class="code-name">.icon-windows</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-windows-fill"></span>
                            <div class="name">windows-fill</div>
                            <div class="code-name">.icon-windows-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-verified"></span>
                            <div class="name">verified</div>
                            <div class="code-name">.icon-verified</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-appstoreadd"></span>
                            <div class="name">appstore add</div>
                            <div class="code-name">.icon-appstoreadd</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-plus"></span>
                            <div class="name">plus</div>
                            <div class="code-name">.icon-plus</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-aim"></span>
                            <div class="name">aim</div>
                            <div class="code-name">.icon-aim</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-mail"></span>
                            <div class="name">mail</div>
                            <div class="code-name">.icon-mail</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-mail-fill"></span>
                            <div class="name">mail-fill</div>
                            <div class="code-name">.icon-mail-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-folder-fill"></span>
                            <div class="name">folder-fill</div>
                            <div class="code-name">.icon-folder-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-folder-open-fill"></span>
                            <div class="name">folder-open-fill</div>
                            <div class="code-name">.icon-folder-open-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-ai"></span>
                            <div class="name">ai</div>
                            <div class="code-name">.icon-f-ai</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-apk"></span>
                            <div class="name">apk</div>
                            <div class="code-name">.icon-f-apk</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-zip"></span>
                            <div class="name">zip</div>
                            <div class="code-name">.icon-f-zip</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-ttf"></span>
                            <div class="name">ttf</div>
                            <div class="code-name">.icon-f-ttf</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-gif"></span>
                            <div class="name">gif</div>
                            <div class="code-name">.icon-f-gif</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-xls"></span>
                            <div class="name">xls</div>
                            <div class="code-name">.icon-f-xls</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-ppt"></span>
                            <div class="name">ppt</div>
                            <div class="code-name">.icon-f-ppt</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-avi"></span>
                            <div class="name">avi</div>
                            <div class="code-name">.icon-f-avi</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-txt"></span>
                            <div class="name">txt</div>
                            <div class="code-name">.icon-f-txt</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-eps"></span>
                            <div class="name">eps</div>
                            <div class="code-name">.icon-f-eps</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-com"></span>
                            <div class="name">com</div>
                            <div class="code-name">.icon-f-com</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-png"></span>
                            <div class="name">png</div>
                            <div class="code-name">.icon-f-png</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-svg"></span>
                            <div class="name">svg</div>
                            <div class="code-name">.icon-f-svg</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-mp4"></span>
                            <div class="name">mp4</div>
                            <div class="code-name">.icon-f-mp4</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-jpg"></span>
                            <div class="name">jpg</div>
                            <div class="code-name">.icon-f-jpg</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-png1"></span>
                            <div class="name">png</div>
                            <div class="code-name">.icon-f-png1</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-psd"></span>
                            <div class="name">psd</div>
                            <div class="code-name">.icon-f-psd</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-mp3"></span>
                            <div class="name">mp3</div>
                            <div class="code-name">.icon-f-mp3</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-html"></span>
                            <div class="name">html</div>
                            <div class="code-name">.icon-f-html</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-doc"></span>
                            <div class="name">doc</div>
                            <div class="code-name">.icon-f-doc</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-f-unknow"></span>
                            <div class="name">unknow</div>
                            <div class="code-name">.icon-f-unknow</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-language"></span>
                            <div class="name">language</div>
                            <div class="code-name">.icon-language</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-aui-icon-back"></span>
                            <div class="name">aui-icon-back</div>
                            <div class="code-name">.icon-aui-icon-back</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-ui_component"></span>
                            <div class="name">ui_component</div>
                            <div class="code-name">.icon-ui_component</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-guide"></span>
                            <div class="name">guide</div>
                            <div class="code-name">.icon-guide</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-user1"></span>
                            <div class="name">user</div>
                            <div class="code-name">.icon-user1</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-back"></span>
                            <div class="name">back</div>
                            <div class="code-name">.icon-back</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-filter1"></span>
                            <div class="name">filter</div>
                            <div class="code-name">.icon-filter1</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-paixusort-jiang"></span>
                            <div class="name">排序sort-降</div>
                            <div class="code-name">.icon-paixusort-jiang</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-paixusort-sheng"></span>
                            <div class="name">排序sort-升</div>
                            <div class="code-name">.icon-paixusort-sheng</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-153error40402"></span>
                            <div class="name">153error40402</div>
                            <div class="code-name">.icon-153error40402</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-152error40401"></span>
                            <div class="name">152error40401</div>
                            <div class="code-name">.icon-152error40401</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-nodata"></span>
                            <div class="name">nodata</div>
                            <div class="code-name">.icon-nodata</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-setting-fill"></span>
                            <div class="name">setting-fill</div>
                            <div class="code-name">.icon-setting-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-man"></span>
                            <div class="name">man</div>
                            <div class="code-name">.icon-man</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-phone"></span>
                            <div class="name">phone</div>
                            <div class="code-name">.icon-phone</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-wrench"></span>
                            <div class="name">wrench</div>
                            <div class="code-name">.icon-wrench</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-tags"></span>
                            <div class="name">tags</div>
                            <div class="code-name">.icon-tags</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-verticalright"></span>
                            <div class="name">vertical right</div>
                            <div class="code-name">.icon-verticalright</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-verticalleft"></span>
                            <div class="name">vertical left</div>
                            <div class="code-name">.icon-verticalleft</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-doubleleft"></span>
                            <div class="name">doubleleft</div>
                            <div class="code-name">.icon-doubleleft</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-doubleright"></span>
                            <div class="name">double right</div>
                            <div class="code-name">.icon-doubleright</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-indent"></span>
                            <div class="name">indent</div>
                            <div class="code-name">.icon-indent</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-outdent"></span>
                            <div class="name">outdent</div>
                            <div class="code-name">.icon-outdent</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-menu"></span>
                            <div class="name">menu</div>
                            <div class="code-name">.icon-menu</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-unorderedlist"></span>
                            <div class="name">unordered list</div>
                            <div class="code-name">.icon-unorderedlist</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-code"></span>
                            <div class="name">code</div>
                            <div class="code-name">.icon-code</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-check"></span>
                            <div class="name">check</div>
                            <div class="code-name">.icon-check</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-close"></span>
                            <div class="name">close</div>
                            <div class="code-name">.icon-close</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-crown"></span>
                            <div class="name">crown</div>
                            <div class="code-name">.icon-crown</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-desktop"></span>
                            <div class="name">desktop</div>
                            <div class="code-name">.icon-desktop</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-stop"></span>
                            <div class="name">stop</div>
                            <div class="code-name">.icon-stop</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-check-circle-fill"></span>
                            <div class="name">check-circle-fill</div>
                            <div class="code-name">.icon-check-circle-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-close-circle-fill"></span>
                            <div class="name">close-circle-fill</div>
                            <div class="code-name">.icon-close-circle-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-info-circle-fill"></span>
                            <div class="name">info-circle-fill</div>
                            <div class="code-name">.icon-info-circle-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-stop-fill"></span>
                            <div class="name">stop-fill</div>
                            <div class="code-name">.icon-stop-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-warning-circle-fill"></span>
                            <div class="name">warning-circle-fill</div>
                            <div class="code-name">.icon-warning-circle-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-heart-fill"></span>
                            <div class="name">heart-fill</div>
                            <div class="code-name">.icon-heart-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-folder-add-fill"></span>
                            <div class="name">folder-add-fill</div>
                            <div class="code-name">.icon-folder-add-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-like-fill"></span>
                            <div class="name">like-fill</div>
                            <div class="code-name">.icon-like-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-unlike-fill"></span>
                            <div class="name">unlike-fill</div>
                            <div class="code-name">.icon-unlike-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-star-fill"></span>
                            <div class="name">star-fill</div>
                            <div class="code-name">.icon-star-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-wrench-fill"></span>
                            <div class="name">wrench-fill</div>
                            <div class="code-name">.icon-wrench-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-apple"></span>
                            <div class="name">apple</div>
                            <div class="code-name">.icon-apple</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-android"></span>
                            <div class="name">android</div>
                            <div class="code-name">.icon-android</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-android-fill"></span>
                            <div class="name">android-fill</div>
                            <div class="code-name">.icon-android-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-apple-fill"></span>
                            <div class="name">apple-fill</div>
                            <div class="code-name">.icon-apple-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-wechat-fill"></span>
                            <div class="name">wechat-fill</div>
                            <div class="code-name">.icon-wechat-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-alipay-circle-fill"></span>
                            <div class="name">alipay-circle-fill</div>
                            <div class="code-name">.icon-alipay-circle-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-alipay-square-fill"></span>
                            <div class="name">alipay-square-fill</div>
                            <div class="code-name">.icon-alipay-square-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-bug-fill"></span>
                            <div class="name">bug-fill</div>
                            <div class="code-name">.icon-bug-fill</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-comment"></span>
                            <div class="name">comment</div>
                            <div class="code-name">.icon-comment</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-search"></span>
                            <div class="name">search</div>
                            <div class="code-name">.icon-search</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-woman"></span>
                            <div class="name">woman</div>
                            <div class="code-name">.icon-woman</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-eye-close"></span>
                            <div class="name">eye-close</div>
                            <div class="code-name">.icon-eye-close</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-clear"></span>
                            <div class="name">clear</div>
                            <div class="code-name">.icon-clear</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-Field-time"></span>
                            <div class="name">Field-time</div>
                            <div class="code-name">.icon-Field-time</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-Partition"></span>
                            <div class="name">Partition</div>
                            <div class="code-name">.icon-Partition</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-compress"></span>
                            <div class="name">compress</div>
                            <div class="code-name">.icon-compress</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-expend"></span>
                            <div class="name">expend</div>
                            <div class="code-name">.icon-expend</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-send"></span>
                            <div class="name">send</div>
                            <div class="code-name">.icon-send</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-right-circle"></span>
                            <div class="name">right-circle</div>
                            <div class="code-name">.icon-right-circle</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-timeout"></span>
                            <div class="name">time out</div>
                            <div class="code-name">.icon-timeout</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-earth"></span>
                            <div class="name">earth</div>
                            <div class="code-name">.icon-earth</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-YUAN"></span>
                            <div class="name">YUAN</div>
                            <div class="code-name">.icon-YUAN</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-sync"></span>
                            <div class="name">sync</div>
                            <div class="code-name">.icon-sync</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-transaction"></span>
                            <div class="name">transaction</div>
                            <div class="code-name">.icon-transaction</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-reload"></span>
                            <div class="name">reload</div>
                            <div class="code-name">.icon-reload</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-message"></span>
                            <div class="name">message</div>
                            <div class="code-name">.icon-message</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-setting"></span>
                            <div class="name">setting</div>
                            <div class="code-name">.icon-setting</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-eye"></span>
                            <div class="name">eye</div>
                            <div class="code-name">.icon-eye</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-location"></span>
                            <div class="name">location</div>
                            <div class="code-name">.icon-location</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-edit-square"></span>
                            <div class="name">edit-square</div>
                            <div class="code-name">.icon-edit-square</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-control"></span>
                            <div class="name">control</div>
                            <div class="code-name">.icon-control</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-adduser"></span>
                            <div class="name">add user</div>
                            <div class="code-name">.icon-adduser</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-deleteteam"></span>
                            <div class="name">delete team</div>
                            <div class="code-name">.icon-deleteteam</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-deleteuser"></span>
                            <div class="name">delete user</div>
                            <div class="code-name">.icon-deleteuser</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-addteam"></span>
                            <div class="name">addteam</div>
                            <div class="code-name">.icon-addteam</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-user"></span>
                            <div class="name">user</div>
                            <div class="code-name">.icon-user</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-team"></span>
                            <div class="name">team</div>
                            <div class="code-name">.icon-team</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-barchart"></span>
                            <div class="name">bar chart</div>
                            <div class="code-name">.icon-barchart</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-filesearch"></span>
                            <div class="name">file search</div>
                            <div class="code-name">.icon-filesearch</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-solution"></span>
                            <div class="name">solution</div>
                            <div class="code-name">.icon-solution</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-file-add"></span>
                            <div class="name">file-add</div>
                            <div class="code-name">.icon-file-add</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-file-excel"></span>
                            <div class="name">file-excel</div>
                            <div class="code-name">.icon-file-excel</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-experiment"></span>
                            <div class="name">experiment</div>
                            <div class="code-name">.icon-experiment</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-bell"></span>
                            <div class="name">bell</div>
                            <div class="code-name">.icon-bell</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-home"></span>
                            <div class="name">home</div>
                            <div class="code-name">.icon-home</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-like"></span>
                            <div class="name">like</div>
                            <div class="code-name">.icon-like</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-unlike"></span>
                            <div class="name">unlike</div>
                            <div class="code-name">.icon-unlike</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-unlock"></span>
                            <div class="name">unlock</div>
                            <div class="code-name">.icon-unlock</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-lock"></span>
                            <div class="name">lock</div>
                            <div class="code-name">.icon-lock</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-customerservice"></span>
                            <div class="name">customerservice</div>
                            <div class="code-name">.icon-customerservice</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-flag"></span>
                            <div class="name">flag</div>
                            <div class="code-name">.icon-flag</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-folder-add"></span>
                            <div class="name">folder-add</div>
                            <div class="code-name">.icon-folder-add</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-calendar-check"></span>
                            <div class="name">calendar-check</div>
                            <div class="code-name">.icon-calendar-check</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-scan"></span>
                            <div class="name">scan</div>
                            <div class="code-name">.icon-scan</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-barcode"></span>
                            <div class="name">barcode</div>
                            <div class="code-name">.icon-barcode</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-cluster"></span>
                            <div class="name">cluster</div>
                            <div class="code-name">.icon-cluster</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-printer"></span>
                            <div class="name">printer</div>
                            <div class="code-name">.icon-printer</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-cloud-upload"></span>
                            <div class="name">cloud-upload</div>
                            <div class="code-name">.icon-cloud-upload</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-cloud-download"></span>
                            <div class="name">cloud-download</div>
                            <div class="code-name">.icon-cloud-download</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-qrcode"></span>
                            <div class="name">qrcode</div>
                            <div class="code-name">.icon-qrcode</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-table"></span>
                            <div class="name">table</div>
                            <div class="code-name">.icon-table</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-idcard"></span>
                            <div class="name">id card</div>
                            <div class="code-name">.icon-idcard</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-creditcard"></span>
                            <div class="name">credit card</div>
                            <div class="code-name">.icon-creditcard</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-heart"></span>
                            <div class="name">heart</div>
                            <div class="code-name">.icon-heart</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-error"></span>
                            <div class="name">error</div>
                            <div class="code-name">.icon-error</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-star"></span>
                            <div class="name">star</div>
                            <div class="code-name">.icon-star</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-wifi"></span>
                            <div class="name">wifi</div>
                            <div class="code-name">.icon-wifi</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-key"></span>
                            <div class="name">key</div>
                            <div class="code-name">.icon-key</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-link"></span>
                            <div class="name">link</div>
                            <div class="code-name">.icon-link</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="font-class-">font-class 引用</h2>
                        <hr />

                        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
                        <p>与 Unicode 使用方式相比，具有如下特点：</p>
                        <ul>
                            <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
                            <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
                        </ul>
                        <p>使用步骤如下：</p>
                        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
                        <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
                        <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
                        <blockquote>
                            <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                        </blockquote>
                    </div>
                </div>
                <div class="content symbol">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-caret-down"></use>
                            </svg>
                            <div class="name">caret-down</div>
                            <div class="code-name">#icon-caret-down</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-caret-up"></use>
                            </svg>
                            <div class="name">caret-up</div>
                            <div class="code-name">#icon-caret-up</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-caret-right"></use>
                            </svg>
                            <div class="name">caret-right</div>
                            <div class="code-name">#icon-caret-right</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-caret-left"></use>
                            </svg>
                            <div class="name">caret-left</div>
                            <div class="code-name">#icon-caret-left</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-arrow-left-bold"></use>
                            </svg>
                            <div class="name">arrow-left-bold</div>
                            <div class="code-name">#icon-arrow-left-bold</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-arrow-up-bold"></use>
                            </svg>
                            <div class="name">arrow-up-bold</div>
                            <div class="code-name">#icon-arrow-up-bold</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-arrow-down-bold"></use>
                            </svg>
                            <div class="name">arrow-down-bold</div>
                            <div class="code-name">#icon-arrow-down-bold</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-arrow-right-bold"></use>
                            </svg>
                            <div class="name">arrow-right-bold</div>
                            <div class="code-name">#icon-arrow-right-bold</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-check-circle"></use>
                            </svg>
                            <div class="name">check-circle</div>
                            <div class="code-name">#icon-check-circle</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-close-circle"></use>
                            </svg>
                            <div class="name">close-circle</div>
                            <div class="code-name">#icon-close-circle</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-info-circle"></use>
                            </svg>
                            <div class="name">info-circle</div>
                            <div class="code-name">#icon-info-circle</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-question-circle"></use>
                            </svg>
                            <div class="name">question-circle</div>
                            <div class="code-name">#icon-question-circle</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-warning-circle"></use>
                            </svg>
                            <div class="name">warning-circle</div>
                            <div class="code-name">#icon-warning-circle</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-issuesclose"></use>
                            </svg>
                            <div class="name">issues close</div>
                            <div class="code-name">#icon-issuesclose</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-appstore"></use>
                            </svg>
                            <div class="name">app store</div>
                            <div class="code-name">#icon-appstore</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-mobile"></use>
                            </svg>
                            <div class="name">mobile</div>
                            <div class="code-name">#icon-mobile</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-tablet"></use>
                            </svg>
                            <div class="name">tablet</div>
                            <div class="code-name">#icon-tablet</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-propertysafety"></use>
                            </svg>
                            <div class="name">property safety</div>
                            <div class="code-name">#icon-propertysafety</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-safetycertificate"></use>
                            </svg>
                            <div class="name">safety certificate</div>
                            <div class="code-name">#icon-safetycertificate</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-insurance"></use>
                            </svg>
                            <div class="name">insurance</div>
                            <div class="code-name">#icon-insurance</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-delete"></use>
                            </svg>
                            <div class="name">delete</div>
                            <div class="code-name">#icon-delete</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-hourglass"></use>
                            </svg>
                            <div class="name">hourglass</div>
                            <div class="code-name">#icon-hourglass</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-skin"></use>
                            </svg>
                            <div class="name">skin</div>
                            <div class="code-name">#icon-skin</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shop"></use>
                            </svg>
                            <div class="name">shop</div>
                            <div class="code-name">#icon-shop</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-rocket"></use>
                            </svg>
                            <div class="name">rocket</div>
                            <div class="code-name">#icon-rocket</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shopping"></use>
                            </svg>
                            <div class="name">shopping</div>
                            <div class="code-name">#icon-shopping</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-laptop"></use>
                            </svg>
                            <div class="name">laptop</div>
                            <div class="code-name">#icon-laptop</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-camera"></use>
                            </svg>
                            <div class="name">camera</div>
                            <div class="code-name">#icon-camera</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-read"></use>
                            </svg>
                            <div class="name">read</div>
                            <div class="code-name">#icon-read</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-notification"></use>
                            </svg>
                            <div class="name">notification</div>
                            <div class="code-name">#icon-notification</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-sound"></use>
                            </svg>
                            <div class="name">sound</div>
                            <div class="code-name">#icon-sound</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-radarchart"></use>
                            </svg>
                            <div class="name">radar chart</div>
                            <div class="code-name">#icon-radarchart</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-drag"></use>
                            </svg>
                            <div class="name">drag</div>
                            <div class="code-name">#icon-drag</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-fire"></use>
                            </svg>
                            <div class="name">fire</div>
                            <div class="code-name">#icon-fire</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-thunderbolt"></use>
                            </svg>
                            <div class="name">thunderbolt</div>
                            <div class="code-name">#icon-thunderbolt</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-appstore-fill"></use>
                            </svg>
                            <div class="name">app store-fill</div>
                            <div class="code-name">#icon-appstore-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-safetycertificate-f"></use>
                            </svg>
                            <div class="name">safety certificate-f</div>
                            <div class="code-name">#icon-safetycertificate-f</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-calendar-check-fill"></use>
                            </svg>
                            <div class="name">calendar-check-fill</div>
                            <div class="code-name">#icon-calendar-check-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-image-fill"></use>
                            </svg>
                            <div class="name">image-fill</div>
                            <div class="code-name">#icon-image-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-idcard-fill"></use>
                            </svg>
                            <div class="name">id card-fill</div>
                            <div class="code-name">#icon-idcard-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-creditcard-fill"></use>
                            </svg>
                            <div class="name">credit card-fill</div>
                            <div class="code-name">#icon-creditcard-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-notification-fill"></use>
                            </svg>
                            <div class="name">notification-fill</div>
                            <div class="code-name">#icon-notification-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-skin-fill"></use>
                            </svg>
                            <div class="name">skin-fill</div>
                            <div class="code-name">#icon-skin-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-sound-fill"></use>
                            </svg>
                            <div class="name">sound-fill</div>
                            <div class="code-name">#icon-sound-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-fire-fill"></use>
                            </svg>
                            <div class="name">fire-fill</div>
                            <div class="code-name">#icon-fire-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-gift-fill"></use>
                            </svg>
                            <div class="name">gift-fill</div>
                            <div class="code-name">#icon-gift-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-thunderbolt-fill"></use>
                            </svg>
                            <div class="name">thunderbolt-fill</div>
                            <div class="code-name">#icon-thunderbolt-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-error-fill"></use>
                            </svg>
                            <div class="name">error-fill</div>
                            <div class="code-name">#icon-error-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-crown-fill"></use>
                            </svg>
                            <div class="name">crown-fill</div>
                            <div class="code-name">#icon-crown-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-ant-cloud"></use>
                            </svg>
                            <div class="name">ant-cloud</div>
                            <div class="code-name">#icon-ant-cloud</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-windows"></use>
                            </svg>
                            <div class="name">windows</div>
                            <div class="code-name">#icon-windows</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-windows-fill"></use>
                            </svg>
                            <div class="name">windows-fill</div>
                            <div class="code-name">#icon-windows-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-verified"></use>
                            </svg>
                            <div class="name">verified</div>
                            <div class="code-name">#icon-verified</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-appstoreadd"></use>
                            </svg>
                            <div class="name">appstore add</div>
                            <div class="code-name">#icon-appstoreadd</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-plus"></use>
                            </svg>
                            <div class="name">plus</div>
                            <div class="code-name">#icon-plus</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-aim"></use>
                            </svg>
                            <div class="name">aim</div>
                            <div class="code-name">#icon-aim</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-mail"></use>
                            </svg>
                            <div class="name">mail</div>
                            <div class="code-name">#icon-mail</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-mail-fill"></use>
                            </svg>
                            <div class="name">mail-fill</div>
                            <div class="code-name">#icon-mail-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-folder-fill"></use>
                            </svg>
                            <div class="name">folder-fill</div>
                            <div class="code-name">#icon-folder-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-folder-open-fill"></use>
                            </svg>
                            <div class="name">folder-open-fill</div>
                            <div class="code-name">#icon-folder-open-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-ai"></use>
                            </svg>
                            <div class="name">ai</div>
                            <div class="code-name">#icon-f-ai</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-apk"></use>
                            </svg>
                            <div class="name">apk</div>
                            <div class="code-name">#icon-f-apk</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-zip"></use>
                            </svg>
                            <div class="name">zip</div>
                            <div class="code-name">#icon-f-zip</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-ttf"></use>
                            </svg>
                            <div class="name">ttf</div>
                            <div class="code-name">#icon-f-ttf</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-gif"></use>
                            </svg>
                            <div class="name">gif</div>
                            <div class="code-name">#icon-f-gif</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-xls"></use>
                            </svg>
                            <div class="name">xls</div>
                            <div class="code-name">#icon-f-xls</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-ppt"></use>
                            </svg>
                            <div class="name">ppt</div>
                            <div class="code-name">#icon-f-ppt</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-avi"></use>
                            </svg>
                            <div class="name">avi</div>
                            <div class="code-name">#icon-f-avi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-txt"></use>
                            </svg>
                            <div class="name">txt</div>
                            <div class="code-name">#icon-f-txt</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-eps"></use>
                            </svg>
                            <div class="name">eps</div>
                            <div class="code-name">#icon-f-eps</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-com"></use>
                            </svg>
                            <div class="name">com</div>
                            <div class="code-name">#icon-f-com</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-png"></use>
                            </svg>
                            <div class="name">png</div>
                            <div class="code-name">#icon-f-png</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-svg"></use>
                            </svg>
                            <div class="name">svg</div>
                            <div class="code-name">#icon-f-svg</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-mp4"></use>
                            </svg>
                            <div class="name">mp4</div>
                            <div class="code-name">#icon-f-mp4</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-jpg"></use>
                            </svg>
                            <div class="name">jpg</div>
                            <div class="code-name">#icon-f-jpg</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-png1"></use>
                            </svg>
                            <div class="name">png</div>
                            <div class="code-name">#icon-f-png1</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-psd"></use>
                            </svg>
                            <div class="name">psd</div>
                            <div class="code-name">#icon-f-psd</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-mp3"></use>
                            </svg>
                            <div class="name">mp3</div>
                            <div class="code-name">#icon-f-mp3</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-html"></use>
                            </svg>
                            <div class="name">html</div>
                            <div class="code-name">#icon-f-html</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-doc"></use>
                            </svg>
                            <div class="name">doc</div>
                            <div class="code-name">#icon-f-doc</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-f-unknow"></use>
                            </svg>
                            <div class="name">unknow</div>
                            <div class="code-name">#icon-f-unknow</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-language"></use>
                            </svg>
                            <div class="name">language</div>
                            <div class="code-name">#icon-language</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-aui-icon-back"></use>
                            </svg>
                            <div class="name">aui-icon-back</div>
                            <div class="code-name">#icon-aui-icon-back</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-ui_component"></use>
                            </svg>
                            <div class="name">ui_component</div>
                            <div class="code-name">#icon-ui_component</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-guide"></use>
                            </svg>
                            <div class="name">guide</div>
                            <div class="code-name">#icon-guide</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-user1"></use>
                            </svg>
                            <div class="name">user</div>
                            <div class="code-name">#icon-user1</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-back"></use>
                            </svg>
                            <div class="name">back</div>
                            <div class="code-name">#icon-back</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-filter1"></use>
                            </svg>
                            <div class="name">filter</div>
                            <div class="code-name">#icon-filter1</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-paixusort-jiang"></use>
                            </svg>
                            <div class="name">排序sort-降</div>
                            <div class="code-name">#icon-paixusort-jiang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-paixusort-sheng"></use>
                            </svg>
                            <div class="name">排序sort-升</div>
                            <div class="code-name">#icon-paixusort-sheng</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-153error40402"></use>
                            </svg>
                            <div class="name">153error40402</div>
                            <div class="code-name">#icon-153error40402</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-152error40401"></use>
                            </svg>
                            <div class="name">152error40401</div>
                            <div class="code-name">#icon-152error40401</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-nodata"></use>
                            </svg>
                            <div class="name">nodata</div>
                            <div class="code-name">#icon-nodata</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-setting-fill"></use>
                            </svg>
                            <div class="name">setting-fill</div>
                            <div class="code-name">#icon-setting-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-man"></use>
                            </svg>
                            <div class="name">man</div>
                            <div class="code-name">#icon-man</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-phone"></use>
                            </svg>
                            <div class="name">phone</div>
                            <div class="code-name">#icon-phone</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-wrench"></use>
                            </svg>
                            <div class="name">wrench</div>
                            <div class="code-name">#icon-wrench</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-tags"></use>
                            </svg>
                            <div class="name">tags</div>
                            <div class="code-name">#icon-tags</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-verticalright"></use>
                            </svg>
                            <div class="name">vertical right</div>
                            <div class="code-name">#icon-verticalright</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-verticalleft"></use>
                            </svg>
                            <div class="name">vertical left</div>
                            <div class="code-name">#icon-verticalleft</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-doubleleft"></use>
                            </svg>
                            <div class="name">doubleleft</div>
                            <div class="code-name">#icon-doubleleft</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-doubleright"></use>
                            </svg>
                            <div class="name">double right</div>
                            <div class="code-name">#icon-doubleright</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-indent"></use>
                            </svg>
                            <div class="name">indent</div>
                            <div class="code-name">#icon-indent</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-outdent"></use>
                            </svg>
                            <div class="name">outdent</div>
                            <div class="code-name">#icon-outdent</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-menu"></use>
                            </svg>
                            <div class="name">menu</div>
                            <div class="code-name">#icon-menu</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-unorderedlist"></use>
                            </svg>
                            <div class="name">unordered list</div>
                            <div class="code-name">#icon-unorderedlist</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-code"></use>
                            </svg>
                            <div class="name">code</div>
                            <div class="code-name">#icon-code</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-check"></use>
                            </svg>
                            <div class="name">check</div>
                            <div class="code-name">#icon-check</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-close"></use>
                            </svg>
                            <div class="name">close</div>
                            <div class="code-name">#icon-close</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-crown"></use>
                            </svg>
                            <div class="name">crown</div>
                            <div class="code-name">#icon-crown</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-desktop"></use>
                            </svg>
                            <div class="name">desktop</div>
                            <div class="code-name">#icon-desktop</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-stop"></use>
                            </svg>
                            <div class="name">stop</div>
                            <div class="code-name">#icon-stop</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-check-circle-fill"></use>
                            </svg>
                            <div class="name">check-circle-fill</div>
                            <div class="code-name">#icon-check-circle-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-close-circle-fill"></use>
                            </svg>
                            <div class="name">close-circle-fill</div>
                            <div class="code-name">#icon-close-circle-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-info-circle-fill"></use>
                            </svg>
                            <div class="name">info-circle-fill</div>
                            <div class="code-name">#icon-info-circle-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-stop-fill"></use>
                            </svg>
                            <div class="name">stop-fill</div>
                            <div class="code-name">#icon-stop-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-warning-circle-fill"></use>
                            </svg>
                            <div class="name">warning-circle-fill</div>
                            <div class="code-name">#icon-warning-circle-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-heart-fill"></use>
                            </svg>
                            <div class="name">heart-fill</div>
                            <div class="code-name">#icon-heart-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-folder-add-fill"></use>
                            </svg>
                            <div class="name">folder-add-fill</div>
                            <div class="code-name">#icon-folder-add-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-like-fill"></use>
                            </svg>
                            <div class="name">like-fill</div>
                            <div class="code-name">#icon-like-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-unlike-fill"></use>
                            </svg>
                            <div class="name">unlike-fill</div>
                            <div class="code-name">#icon-unlike-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-star-fill"></use>
                            </svg>
                            <div class="name">star-fill</div>
                            <div class="code-name">#icon-star-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-wrench-fill"></use>
                            </svg>
                            <div class="name">wrench-fill</div>
                            <div class="code-name">#icon-wrench-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-apple"></use>
                            </svg>
                            <div class="name">apple</div>
                            <div class="code-name">#icon-apple</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-android"></use>
                            </svg>
                            <div class="name">android</div>
                            <div class="code-name">#icon-android</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-android-fill"></use>
                            </svg>
                            <div class="name">android-fill</div>
                            <div class="code-name">#icon-android-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-apple-fill"></use>
                            </svg>
                            <div class="name">apple-fill</div>
                            <div class="code-name">#icon-apple-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-wechat-fill"></use>
                            </svg>
                            <div class="name">wechat-fill</div>
                            <div class="code-name">#icon-wechat-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-alipay-circle-fill"></use>
                            </svg>
                            <div class="name">alipay-circle-fill</div>
                            <div class="code-name">#icon-alipay-circle-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-alipay-square-fill"></use>
                            </svg>
                            <div class="name">alipay-square-fill</div>
                            <div class="code-name">#icon-alipay-square-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-bug-fill"></use>
                            </svg>
                            <div class="name">bug-fill</div>
                            <div class="code-name">#icon-bug-fill</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-comment"></use>
                            </svg>
                            <div class="name">comment</div>
                            <div class="code-name">#icon-comment</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-search"></use>
                            </svg>
                            <div class="name">search</div>
                            <div class="code-name">#icon-search</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-woman"></use>
                            </svg>
                            <div class="name">woman</div>
                            <div class="code-name">#icon-woman</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-eye-close"></use>
                            </svg>
                            <div class="name">eye-close</div>
                            <div class="code-name">#icon-eye-close</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-clear"></use>
                            </svg>
                            <div class="name">clear</div>
                            <div class="code-name">#icon-clear</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-Field-time"></use>
                            </svg>
                            <div class="name">Field-time</div>
                            <div class="code-name">#icon-Field-time</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-Partition"></use>
                            </svg>
                            <div class="name">Partition</div>
                            <div class="code-name">#icon-Partition</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-compress"></use>
                            </svg>
                            <div class="name">compress</div>
                            <div class="code-name">#icon-compress</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-expend"></use>
                            </svg>
                            <div class="name">expend</div>
                            <div class="code-name">#icon-expend</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-send"></use>
                            </svg>
                            <div class="name">send</div>
                            <div class="code-name">#icon-send</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-right-circle"></use>
                            </svg>
                            <div class="name">right-circle</div>
                            <div class="code-name">#icon-right-circle</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-timeout"></use>
                            </svg>
                            <div class="name">time out</div>
                            <div class="code-name">#icon-timeout</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-earth"></use>
                            </svg>
                            <div class="name">earth</div>
                            <div class="code-name">#icon-earth</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-YUAN"></use>
                            </svg>
                            <div class="name">YUAN</div>
                            <div class="code-name">#icon-YUAN</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-sync"></use>
                            </svg>
                            <div class="name">sync</div>
                            <div class="code-name">#icon-sync</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-transaction"></use>
                            </svg>
                            <div class="name">transaction</div>
                            <div class="code-name">#icon-transaction</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-reload"></use>
                            </svg>
                            <div class="name">reload</div>
                            <div class="code-name">#icon-reload</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-message"></use>
                            </svg>
                            <div class="name">message</div>
                            <div class="code-name">#icon-message</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-setting"></use>
                            </svg>
                            <div class="name">setting</div>
                            <div class="code-name">#icon-setting</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-eye"></use>
                            </svg>
                            <div class="name">eye</div>
                            <div class="code-name">#icon-eye</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-location"></use>
                            </svg>
                            <div class="name">location</div>
                            <div class="code-name">#icon-location</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-edit-square"></use>
                            </svg>
                            <div class="name">edit-square</div>
                            <div class="code-name">#icon-edit-square</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-control"></use>
                            </svg>
                            <div class="name">control</div>
                            <div class="code-name">#icon-control</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-adduser"></use>
                            </svg>
                            <div class="name">add user</div>
                            <div class="code-name">#icon-adduser</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-deleteteam"></use>
                            </svg>
                            <div class="name">delete team</div>
                            <div class="code-name">#icon-deleteteam</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-deleteuser"></use>
                            </svg>
                            <div class="name">delete user</div>
                            <div class="code-name">#icon-deleteuser</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-addteam"></use>
                            </svg>
                            <div class="name">addteam</div>
                            <div class="code-name">#icon-addteam</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-user"></use>
                            </svg>
                            <div class="name">user</div>
                            <div class="code-name">#icon-user</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-team"></use>
                            </svg>
                            <div class="name">team</div>
                            <div class="code-name">#icon-team</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-barchart"></use>
                            </svg>
                            <div class="name">bar chart</div>
                            <div class="code-name">#icon-barchart</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-filesearch"></use>
                            </svg>
                            <div class="name">file search</div>
                            <div class="code-name">#icon-filesearch</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-solution"></use>
                            </svg>
                            <div class="name">solution</div>
                            <div class="code-name">#icon-solution</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-file-add"></use>
                            </svg>
                            <div class="name">file-add</div>
                            <div class="code-name">#icon-file-add</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-file-excel"></use>
                            </svg>
                            <div class="name">file-excel</div>
                            <div class="code-name">#icon-file-excel</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-experiment"></use>
                            </svg>
                            <div class="name">experiment</div>
                            <div class="code-name">#icon-experiment</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-bell"></use>
                            </svg>
                            <div class="name">bell</div>
                            <div class="code-name">#icon-bell</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-home"></use>
                            </svg>
                            <div class="name">home</div>
                            <div class="code-name">#icon-home</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-like"></use>
                            </svg>
                            <div class="name">like</div>
                            <div class="code-name">#icon-like</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-unlike"></use>
                            </svg>
                            <div class="name">unlike</div>
                            <div class="code-name">#icon-unlike</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-unlock"></use>
                            </svg>
                            <div class="name">unlock</div>
                            <div class="code-name">#icon-unlock</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-lock"></use>
                            </svg>
                            <div class="name">lock</div>
                            <div class="code-name">#icon-lock</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-customerservice"></use>
                            </svg>
                            <div class="name">customerservice</div>
                            <div class="code-name">#icon-customerservice</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-flag"></use>
                            </svg>
                            <div class="name">flag</div>
                            <div class="code-name">#icon-flag</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-folder-add"></use>
                            </svg>
                            <div class="name">folder-add</div>
                            <div class="code-name">#icon-folder-add</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-calendar-check"></use>
                            </svg>
                            <div class="name">calendar-check</div>
                            <div class="code-name">#icon-calendar-check</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-scan"></use>
                            </svg>
                            <div class="name">scan</div>
                            <div class="code-name">#icon-scan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-barcode"></use>
                            </svg>
                            <div class="name">barcode</div>
                            <div class="code-name">#icon-barcode</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-cluster"></use>
                            </svg>
                            <div class="name">cluster</div>
                            <div class="code-name">#icon-cluster</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-printer"></use>
                            </svg>
                            <div class="name">printer</div>
                            <div class="code-name">#icon-printer</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-cloud-upload"></use>
                            </svg>
                            <div class="name">cloud-upload</div>
                            <div class="code-name">#icon-cloud-upload</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-cloud-download"></use>
                            </svg>
                            <div class="name">cloud-download</div>
                            <div class="code-name">#icon-cloud-download</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-qrcode"></use>
                            </svg>
                            <div class="name">qrcode</div>
                            <div class="code-name">#icon-qrcode</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-table"></use>
                            </svg>
                            <div class="name">table</div>
                            <div class="code-name">#icon-table</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-idcard"></use>
                            </svg>
                            <div class="name">id card</div>
                            <div class="code-name">#icon-idcard</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-creditcard"></use>
                            </svg>
                            <div class="name">credit card</div>
                            <div class="code-name">#icon-creditcard</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-heart"></use>
                            </svg>
                            <div class="name">heart</div>
                            <div class="code-name">#icon-heart</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-error"></use>
                            </svg>
                            <div class="name">error</div>
                            <div class="code-name">#icon-error</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-star"></use>
                            </svg>
                            <div class="name">star</div>
                            <div class="code-name">#icon-star</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-wifi"></use>
                            </svg>
                            <div class="name">wifi</div>
                            <div class="code-name">#icon-wifi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-key"></use>
                            </svg>
                            <div class="name">key</div>
                            <div class="code-name">#icon-key</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-link"></use>
                            </svg>
                            <div class="name">link</div>
                            <div class="code-name">#icon-link</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="symbol-">Symbol 引用</h2>
                        <hr />

                        <p>
                            这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> 这种用法其实是做了一个 SVG
                            的集合，与另外两种相比具有如下特点：
                        </p>
                        <ul>
                            <li>支持多色图标了，不再受单色限制。</li>
                            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
                            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
                            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
                        </ul>
                        <p>使用步骤如下：</p>
                        <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
                        <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                        <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
                        <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
                        <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $(".tab-container .content:first").show();

                $("#tabs li").click(function (e) {
                    var tabContent = $(".tab-container .content");
                    var index = $(this).index();

                    if ($(this).hasClass("active")) {
                        return;
                    } else {
                        $("#tabs li").removeClass("active");
                        $(this).addClass("active");

                        tabContent.hide().eq(index).fadeIn();
                    }
                });
            });
        </script>
    </body>
</html>
